<template>
  <el-card class="box-card">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="重置后台密码" name="1">
        <div style="width: 40%;">
          <Eform
          :model="form1"
          :rules="rules1"
          :elem="fromData1"
          ref="ruleFormRef1"
          :submit="true"
          :reset="false"
          :button="false"
          :inline="false"
          btnSize="default"
          submitText="保存修改"
          @onSuccess="onSuccess1"
        />
        </div>
      </el-tab-pane>
      <el-tab-pane label="数字大屏账号" name="2">
        <div style="width: 40%;">
          <Eform
            :model="form2"
            :rules="rules2"
            :elem="fromData2"
            :submit="true"
            :reset="false"
            :button="false"
            :inline="false"
            ref="ruleFormRef2"
            btnSize="default"
            submitText="保存修改"
            @onSuccess="onSuccess2"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import Eform from '@/components/eform/index.vue';
import useCurrentInstance from '@/utils/useCurrentInstance';

const router = useRouter()
const { proxy } = useCurrentInstance()
const activeName = ref('1')
let name = ref('')
let form1 = reactive({
  password:'',
  new_password:'',
  confirm_password:''
})
let fromData1 = reactive([
  {
    label: "原密码",
    prop: "password",
    labelWidth:'100',
    clearable: true,
    showPassword:true,
    style:{paddingBottom:'20px'}
  },
  {
    label: "新密码",
    prop: "new_password",
    labelWidth:'100',
    clearable: true,
    showPassword:true,
    style:{paddingBottom:'20px'}
  },
  {
    label: "确认密码",
    prop: "confirm_password",
    labelWidth:'100',
    clearable: true,
    showPassword:true,
    style:{paddingBottom:'50px'}
  }
])
let form2 = reactive({
  password:''
})
let fromData2 = reactive([
  {
    label: "登录账号",
    prop: "username",
    placeholder: name,
    disabled:true,
    style:{paddingBottom:'20px'}
  },
  {
    label: "登录密码",
    prop: "password",
    clearable: true,
    showPassword:true,
    style:{paddingBottom:'50px'}
  }
])
let rules1 = reactive({
  password:[
    { required: true, message: '请输入原密码', trigger: 'blur' },
  ],
  new_password:[
    { required: true, message: '请输入新密码', trigger: 'blur' },
  ],
  confirm_password:[
    { required: true, message: '请确认新密码', trigger: 'blur' },
  ],
})
let rules2 = reactive({
  password:[
    { required: true, message: '请输入登录密码', trigger: 'blur' },
  ]
})

const handleClick = () => {}
let ruleFormRef1 = ref()
const onSuccess1 = () => {
  ruleFormRef1.value.validate().then(val => {
    if(val){
      proxy.$api.getOauthPassword(form1).then(res => {
        if(res.code == 200){
          proxy.$message({
            type: 'success',
            message: res.msg,
          })
          router.push({path:'/login'})
        }
      })
    }
  })
}

let ruleFormRef2 = ref()
const onSuccess2 = () => {
  ruleFormRef2.value.validate().then(val => {
    if(val){
      proxy.$api.getScreenPassword(form2).then(res => {
        if(res.code == 200){
          proxy.$message({
              type: 'success',
              message: res.msg,
          })
          ruleFormRef2.value.concel()
        }
      })
    }
  })
}

// 获取企业账号
const getInformation = () => {
  proxy.$api.getInformation().then(res => {
    name.value = res.result.screen.account
  })
}
getInformation()
</script>

<style lang='scss' scoped>

</style>
